import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Form, Input, Button, Select, Row, Col, Checkbox, message } from "antd";
import { LOGIN_LINK } from "../actions/types.js";
import axios from "axios";
import logo from "../images/logo.png";
import UserInfo from "./UserInfo.js";
const FormItem = Form.Item;
const Option = Select.Option;
class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasRegister: false,
      telphone: ""
    };
  }
  handleRegister = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const regInfo = {};
        console.log("Received values of form: ", values);
        const regx = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
        if (!values.phone.match(regx)) {
          message.error("请输入正确的手机号码");
          return;
        }
        if (values.password.length < 6) {
          message.error("请输入6位密码");
          return;
        }
        if (!values.agreement) {
          message.error("需勾选已阅读用户协议");
          return;
        }
        regInfo["telphone"] = values.phone;
        regInfo["password"] = values.password;
        axios.get(`/Tgh/data/register_account_data`, {params:regInfo}).then(res => {
          // console.log(res.data);
          if (res.data.status === "success") {
            message.success("注册成功，请完善个人信息");
            this.setState({
              hasRegister: true,
              telphone: values.phone
            });
          } else {
            message.error("当前手机号已被注册");
          }
        });
      }
    });
  };
  render() {
    return (
      <section className="login-contain">
        <div className="top-title">
          <i
            className="fa fa-angle-left back"
            onClick={() => this.props.history.go(-1)}
          />
          注册
        </div>
        <div style={{ backgroundImage: `url(${logo})` }} className="logo" />
        {this.renderForm()}
      </section>
    );
  }
  renderForm() {
    const { getFieldDecorator } = this.props.form;
    const prefixSelector = getFieldDecorator("prefix", {
      initialValue: "86"
    })(
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="65">+65</Option>
      </Select>
    );
    if (!this.state.hasRegister) {
      return (
        <div>
          <div style={{ paddingLeft: "30px", margin: "18px 0" }}>
            请输入您的手机号码，注册您的账号
          </div>
          <Form onSubmit={this.handleRegister} className="login-form">
            <FormItem>
              {getFieldDecorator("phone", {
                rules: [{ required: true, message: "请输入手机号" }]
              })(
                <Input
                  addonBefore={prefixSelector}
                  style={{ width: "100%" }}
                  placeholder="请输入手机号"
                />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator("password", {
                rules: [{ required: true, message: "请输入密码" }]
              })(
                <Input
                  type="password"
                  addonBefore={
                    <span style={{ fontSize: "16px", padding: "0 6px" }}>
                      密 码
                    </span>
                  }
                  style={{ width: "100%" }}
                  placeholder="请输入登陆密码"
                />
              )}
            </FormItem>
            <FormItem>
              <Row gutter={12}>
                <Col span={16} style={{ marginTop: "-2px" }}>
                  {getFieldDecorator("captcha", {
                    rules: [{ required: true, message: "请输入你获取的验证码" }]
                  })(
                    <Input
                      addonBefore={
                        <span style={{ fontSize: "16px" }}>验证码</span>
                      }
                      placeholder="请输入验证码"
                    />
                  )}
                </Col>
                <Col span={8}>
                  <Button>获取验证码</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem>
              {getFieldDecorator("agreement", {
                valuePropName: "checked"
              })(
                <Checkbox>
                  我已阅读
                  <a href="http://www.baidu.com">用户协议</a>
                </Checkbox>
              )}
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                下一步
              </Button>
              <Link to={LOGIN_LINK}>返回登陆</Link>
            </FormItem>
          </Form>
        </div>
      );
    } else {
      return (
        <UserInfo
          history={this.props.history}
          type="register"
          telphone={this.state.telphone}
        />
      );
    }
  }
}

export default Form.create()(Register);
